<!doctype html>
<html lang="en">
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>

    <meta charset="utf-8">
    <title>Lock | Rainy-Heights&春江花朝秋月夜</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description">
    <meta content="Themesbrand" name="author">
    <!-- App favicon -->


    <!-- preloader css -->
    <link rel="stylesheet" href="/../static/css/preloader.min.css" type="text/css">


    <!-- Bootstrap Css -->
    <link href="/../static/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css">
    <!-- Icons Css -->
    <link href="/../static/css/icons.min.css" rel="stylesheet" type="text/css">
    <!-- App Css-->
    <link href="/../static/css/app.min.css" id="app-style" rel="stylesheet" type="text/css">

</head>

<body>

<!-- <body data-layout="horizontal"> -->
<div class="auth-page">
    <div class="container-fluid p-0">
        <div class="row g-0">
            <div class="col-xxl-3 col-lg-4 col-md-5">
            <!--    <div class="auth-full-page-content d-flex p-sm-5 p-4">
                    <div class="w-100">
                        <div class="d-flex flex-column h-100">
                            <div class="mb-4 mb-md-5 text-center">
                                <a href="/auth-login" class="d-block auth-logo">
                                    <img src="/../static/picture/logo-sm.svg" alt="" height="28"> <span class="logo-txt">人间词话</span>
                                </a>
                            </div>
                            <div class="auth-content my-auto">
                                <div class="text-center">
                                    <h5 class="mb-0">欢迎回来</h5>
                                    <p class="text-muted mt-2">Sign in to continue to Rainy-Heights.</p>
                                </div>
                                &lt;!&ndash;请求主页&ndash;&gt;
                                <form  action="/auth-login" method="post">
                                    <div class="mb-3">
                                        <label class="form-label">用户名</label>
                                        <input type="text" class="form-control" name="username" placeholder="用户名">
                                    </div>
                                    <div class="mb-3">
                                        <div class="d-flex align-items-start">
                                            <div class="flex-grow-1">
                                                <label class="form-label">密码</label>
                                            </div>
                                            <div class="flex-shrink-0">
                                                <div class="">
                                                    <a href="/auth-register" class="text-muted">忘记密码？</a>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="input-group auth-pass-inputgroup">
                                            &lt;!&ndash;这里需要布置好前端的name属性，后端没有问题的时候需要仔细检查前端的信息交付&ndash;&gt;
                                            <input type="password" class="form-control" placeholder="密码" aria-label="Password" aria-describedby="password-addon" name="password">
                                            <button class="btn btn-light shadow-none ms-0" type="button" id="password-addon"><i class="mdi mdi-eye-outline"></i></button>
                                        </div>
                                    </div>
                                    <div class="row mb-4">
                                        <div class="col">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="remember-me">
                                                <label class="form-check-label" for="remember-me">
                                                    记住我
                                                </label>
                                            </div>
                                            <div>
                                                &lt;!&ndash;                                                        <input type="text" th:name="${_csrf.getParameterName()}" th:value="${_csrf.token}" hidden>&ndash;&gt;
                                            </div>
                                        </div>

                                    </div>
                                    <div class="mb-3">
                                        <button class="btn btn-primary w-100 waves-effect waves-light" type="submit">登录</button>
                                    </div>
                                </form>

                                <div class="mt-4 pt-2 text-center">
                                    <div class="signin-other-title">
                                        <h5 class="font-size-14 mb-3 text-muted fw-medium">第三方登录</h5>
                                    </div>

                                    <ul class="list-inline mb-0">
                                        <li class="list-inline-item">
                                            <a href="https://www.bilibili.com/" class="social-list-item bg-primary text-white border-primary">
                                                <i class="mdi mdi-facebook"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="https://space.bilibili.com/159283119?spm_id_from=333.1007.0.0" class="social-list-item bg-info text-white border-info">
                                                <i class="mdi mdi-twitter"></i>
                                            </a>
                                        </li>
                                        <li class="list-inline-item">
                                            <a href="https://weixin.qq.com/" class="social-list-item bg-danger text-white border-danger">
                                                <i class="mdi mdi-google"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="mt-5 text-center">
                                    <p class="text-muted mb-0">没有账户？ <a href="/auth-register" class="text-primary fw-semibold"> 立即注册</a> </p>
                                </div>
                            </div>
                            <div class="mt-4 mt-md-5 text-center">
                                <p class="mb-0">© <script>document.write(new Date().getFullYear())</script>Rainy-Heights . Crafted with <i class="mdi mdi-heart text-danger"></i> by 春江花朝秋月夜</p>
                            </div>
                        </div>
                    </div>
                </div>-->

               <!-- <div class="auth-content my-auto">
                    <div class="text-center">
                        <h5 class="mb-0">锁屏</h5>
                        <p class="text-muted mt-2">输入密码解锁</p>
                    </div>
                    <div class="user-thumb text-center mb-4 mt-4 pt-2">
                        <img src="../static/picture/avatar-1.jpg" class="rounded-circle img-thumbnail avatar-lg" alt="thumbnail">
                        <h5 class="font-size-15 mt-3">杜甫</h5>
                    </div>
                    <form class="mt-4" action="/index">
                        <div class="mb-3">
                            <label class="form-label" for="password">Password</label>
                            <input type="password" class="form-control" id="password" placeholder="输入密码">
                        </div>
                        <div class="mb-3 mt-4">
                            <button class="btn btn-primary w-100 waves-effect waves-light" type="submit">解锁</button>
                        </div>
                    </form>

                    <div class="mt-5 text-center">
                        <p class="text-muted mb-0">不是本人？ <a href="/auth-register" class="text-primary fw-semibold"> 注册 </a> </p>
                    </div>
                </div>-->

                <div class="auth-full-page-content d-flex p-sm-5 p-4">
                    <div class="w-100">
                        <div class="d-flex flex-column h-100">
                            <div class="mb-4 mb-md-5 text-center">
                                <a href="index.html" class="d-block auth-logo">
                                    <img src="../../static/picture/logo-sm.svg" alt="" height="28"> <span class="logo-txt">人间词话</span>
                                </a>
                            </div>
                            <div class="auth-content my-auto">
                                <div class="text-center">
                                    <h5 class="mb-0">锁屏</h5>
                                    <p class="text-muted mt-2">解锁</p>
                                </div>
                                <form class="mt-4" action="/unlock/unlock" method="post">
                                    <div class="mb-3">
                                        <label class="form-label" for="password">密码</label>
                                        <input type="password" class="form-control" id="password" placeholder="输入密码">
                                    </div>
                                    <div class="mb-3 mt-4">
                                        <button class="btn btn-primary w-100 waves-effect waves-light" type="submit">解锁</button>
                                    </div>
                                </form>

                                <div class="mt-5 text-center">
                                    <p class="text-muted mb-0">不是本人？ <a href="/auth-register" class="text-primary fw-semibold"> 注册 </a> </p>
                                </div>
                            </div>
                            <div class="mt-4 mt-md-5 text-center">
                                <p class="mb-0">© <script>document.write(new Date().getFullYear())</script> Rainy-Heights. Crafted with <i class="mdi mdi-heart text-danger"></i> by 春江花朝秋月夜</p>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- end auth full page content -->
            </div>
            <!-- end col -->
            <div class="col-xxl-9 col-lg-8 col-md-7">
                <div class="auth-bg pt-md-5 p-4 d-flex">
                    <!--                            <div class="bg-overlay bg-primary"></div>-->
                    <ul class="bg-bubbles">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <!-- end bubble effect -->
                    <div class="row justify-content-center align-items-center">
                        <div class="col-xl-7">
                            <div class="p-0 p-sm-4 px-xl-0">
                                <div id="reviewcarouselIndicators" class="carousel slide" data-bs-ride="carousel">
                                    <!-- end carouselIndicators -->
                                    <div class="carousel-inner">
                                        <div class="carousel-item active">
                                            <div class="testi-contain text-white">
                                                <i class="bx bxs-quote-alt-left text-success display-6"></i>

                                                <h4 class="mt-4 fw-medium lh-base text-white">
                                                    高丽朝中期开始，具有朝鲜语特点的时调得以发展，并在李氏朝鲜时期达到顶峰。时调是朝鲜的俚语民歌，
                                                    但由于是汉诗诗人整理记录，而且汉诗诗人创作了很多时调，时调在发展中自然地融入了汉诗的因素。
                                                </h4>
                                                <div class="mt-4 pt-3 pb-5">
                                                    <div class="d-flex align-items-start">
                                                        <div class="flex-shrink-0">
                                                        </div>
                                                        <div class="flex-grow-1 ms-3 mb-4">
                                                            <h5 class="font-size-18 text-white">理查德
                                                            </h5>
                                                            <p class="mb-0 text-white-50">历史学者</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="carousel-item">
                                            <div class="testi-contain text-white">
                                                <i class="bx bxs-quote-alt-left text-success display-6"></i>

                                                <h4 class="mt-4 fw-medium lh-base text-white">
                                                    诗歌，是一种抒情言志的文学体裁。是用高度凝练的语言，
                                                    生动形象地表达作者丰富情感，集中反映社会生活并具有一定节奏和韵律的文学体裁。
                                                </h4>
                                                <div class="mt-4 pt-3 pb-5">
                                                    <div class="d-flex align-items-start">
                                                        <div class="flex-shrink-0">
                                                        </div>
                                                        <div class="flex-grow-1 ms-3 mb-4">
                                                            <h5 class="font-size-18 text-white">丽丝娜
                                                            </h5>
                                                            <p class="mb-0 text-white-50">诗歌爱好者</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="carousel-item">
                                            <div class="testi-contain text-white">
                                                <i class="bx bxs-quote-alt-left text-success display-6"></i>

                                                <h4 class="mt-4 fw-medium lh-base text-white">
                                                    《毛诗·大序》记载：“诗者，志之所之也。在心为志，发言为诗”。南宋严羽
                                                    《沧浪诗话》云：“诗者，吟咏性情也”。只有一种用言语表达的艺术就是诗歌。
                                                </h4>
                                                <div class="mt-4 pt-3 pb-5">
                                                    <div class="d-flex align-items-start">
                                                        <div class="flex-1 ms-3 mb-4">
                                                            <h5 class="font-size-18 text-white">管泽平</h5>
                                                            <p class="mb-0 text-white-50">特约评论作家
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- end carousel-inner -->
                                </div>
                                <!-- end review carousel -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end col -->
        </div>
        <!-- end row -->
    </div>
    <!-- end container fluid -->
</div>


<!-- JAVASCRIPT -->
<script src="/../static/js/jquery.min.js"></script>
<script src="/../static/js/bootstrap.bundle.min.js"></script>
<script src="/../static/js/metisMenu.min.js"></script>
<script src="/../static/js/simplebar.min.js"></script>
<script src="/../static/js/waves.min.js"></script>
<script src="/../static/js/feather.min.js"></script>
<!-- pace js -->
<script src="/../static/js/pace.min.js"></script>
<!-- password addon init -->
<script src="/../static/js/pass-addon.init.js"></script>

</body>

</html>